<template>
  <div>
    <div border="~" rounded="md" p="y-12" text="2xl" m="b-6">
      {{ topicList[currentTopicIndex].topic_name }}
    </div>

    <div
      v-for="(item, index) in topicList[currentTopicIndex].selectList"
      :key="item.select_item_id"
      :class="{
        'bg-dark-500 text-light-500 border-transparent':
          selectInfo.index === index,
      }"
      @click="selectTopic(item, index)"
      border="~"
      m="b-3"
      h="12"
      rounded="md"
      flex="~"
      items="center"
      p="l-3"
    >
      <div flex="~" items="center">
        <span
          w="8"
          h="8"
          bg="dark-500"
          text="light-500"
          rounded="full"
          flex="~"
          justify="center"
          items="center"
          m="r-3"
          >{{ topicKey(index) }}</span
        >
        <span text="xl">{{ item.select_item_name }}</span>
      </div>
    </div>

    <div flex="~" items="center" p="t-6">
      <button
        type="button"
        class="btn"
        :class="{
          'bg-gray-500 text-light-500': getShowFirst,
        }"
        :disabled="getShowFirst"
        @click="prevTopic"
      >
        上一题
      </button>
      <p w="12"></p>
      <button type="button" v-if="!showLast" class="btn" @click="nextTopic">
        下一题
      </button>
      <button v-if="showLast" type="button" class="btn" @click="submitTopic">
        提交
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { answerStore, SingeTopicModel } from '../../store/modules/answer';

const router = useRouter();

const store = answerStore();
const { topicList, currentTopicIndex, answerList } = storeToRefs(store);

enum TopicKey {
  'A',
  'B',
  'C',
  'D',
}

const topicKey = (index: number) => TopicKey[index];

const selectInfo = reactive({
  index: -1,
  Item: {} as SingeTopicModel,
});
const selectTopic = (item: SingeTopicModel, index: number) => {
  // console.log(item, index)
  selectInfo.Item = item;
  selectInfo.index = index;
};

const getShowFirst = computed(() => {
  return currentTopicIndex.value === 0;
});

// 上一题
const prevTopic = () => {
  // 上一题的信息
  let item = answerList.value[currentTopicIndex.value - 1];

  store.prevTopic(item, () => {
    // 回调函数要做的事情就是修改或删除answerList中的值
    // 当前第几题
    let topicIndex = topicList.value.findIndex(
      (singleTopic) => singleTopic.topic_id === item.parent_topic_id
    );
    console.log('topicIndex', topicIndex);
    let singleIndex = topicList.value[topicIndex].selectList.findIndex(
      (singleItem) => singleItem.select_item_id === item.select_item_id
    );
    selectTopic(item, singleIndex);
    answerList.value.splice(topicIndex, 1);
  });
};
// 下一题
const nextTopic = () => {
  if (selectInfo.index === -1 || !Object.keys(selectInfo.Item).length) {
    alert('请选择一个答案');
    return;
  }

  store.setTopic(selectInfo.Item, () => {
    selectInfo.index = -1;
    selectInfo.Item = {} as SingeTopicModel;
  });
};

const showLast = computed(() => {
  return currentTopicIndex.value === topicList.value.length - 1;
});

const submitTopic = () => {
  nextTopic();
  router.push('/score');
};
</script>

<style scoped></style>
